<template>
<div style="padding: 20px">
  <div class="opt-area-02">
    <div class="left-con">
      <div class="input-frame" style="width: 230px">
        <Select placeholder="请选择人员类型" v-model="params.SC_EMPL_TYPE" style="width:210px">
          <Option v-for="(item,index) in SELECT_SC_EMPL_TYPEList" :key="index" :value="item.value">{{item.label}}</Option>
        </Select>
      </div>
      <div class="input-frame" style="width: 230px">
        <Input placeholder="请输入姓名" v-model="params.STREET_EMPL_NAME"/>
      </div>
      <div class="input-frame" style="width: 230px">
        <Input placeholder="请输入身份证号" v-model="params.PAPER_NO"/>
      </div>
      <div class="input-frame" style="width: 230px">
        <Input placeholder="请输入联系方式" v-model="params.PHONE"/>
      </div>
      <Button type="info" @click="selectList()" style="margin-top: 0px;margin-right:10px">搜索</Button>
      <Button type="success" @click="clickAdd()" style="margin-top: 0px;margin-right:10px">新增</Button>
      <Button type="primary" @click="clickDr()" style="margin-top: 0px;margin-right:10px">导入</Button>
    </div>
  </div>
  <Table border :columns="tableColumns" :data="tableData">
    <template slot-scope="{ row, index }" slot="SC_EMPL_TYPE">
      <span v-for="(item,index) in SC_EMPL_TYPEList" :key="index" :value="item.value">
        <span v-if="row.SC_EMPL_TYPE === item.value">{{item.label}}</span>
      </span>
    </template>
    <template slot-scope="{ row, index }" slot="action">
      <Button type="primary" size="small" style="margin-right: 5px" @click="clickUpdate(row)">修改</Button>
      <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
    </template>
  </Table>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
          @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <Modal width="720" v-model="modal" style="align-content: center" title="人员信息">
    <Row class="item1">
      <Col span="4" style="text-align: right" >人员类型:</Col>
      <Col span="17" offset="1" >
        <Select :disabled="type === 'update'" placeholder="请选择人员类型" v-model="addData.SC_EMPL_TYPE">
          <Option v-for="(item,index) in SC_EMPL_TYPEList" :key="index" :value="item.value">{{item.label}}</Option>
        </Select>
      </Col>
    </Row>
    <Row v-if="addData.SC_EMPL_TYPE === 3" class="item1">
      <Col span="4" style="text-align: right" >包联网格:</Col>
      <Col span="17" offset="1" >
        <Select placeholder="请选择包联网格" v-model="addData.BASE_GRID_ID">
          <Option v-for="(item,index) in gardenList" :key="index" :value="item.id">{{item.name}}</Option>
        </Select>
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >姓名:</Col>
      <Col span="17" offset="1" >
        <Input v-model="addData.STREET_EMPL_NAME" />
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >身份证号:</Col>
      <Col span="17" offset="1" >
        <Input :disabled="type === 'update'" v-model="addData.PAPER_NO" />
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >联系方式:</Col>
      <Col span="17" offset="1" >
        <Input v-model="addData.PHONE" />
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >政治面貌:</Col>
      <Col span="17" offset="1" >
        <Select placeholder="请选择政治面貌" v-model="addData.DIC_POLITICAL">
          <Option value="01">是党员</Option>
          <Option value="02">不是党员</Option>
        </Select>
      </Col>
    </Row>
    <Row v-if="addData.DIC_POLITICAL === '01'" class="item1">
      <Col span="4" style="text-align: right" >入党时间:</Col>
      <Col span="17" offset="1">
        <DatePicker style="width: 100%" type="date" v-model="addData.IN_PART_TIME"></DatePicker>
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >民族:</Col>
      <Col span="17" offset="1" >
        <Select placeholder="请选择民族" v-model="addData.DIC_NATION">
          <Option v-for="(item,index) in folkList" :key="index" :value="item.mzcode">{{item.mzname}}</Option>
        </Select>
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >学历:</Col>
      <Col span="17" offset="1" >
        <Select placeholder="请选择学历" v-model="addData.DIC_EDU">
          <Option v-for="(item,index) in xlList" :key="index" :value="item.dictValue">{{ item.dictLabel }}</Option>
        </Select>
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >工作单位:</Col>
      <Col span="17" offset="1" >
        <Input v-model="addData.WORK_UNIT" />
      </Col>
    </Row>
    <Row class="item1">
      <Col span="4" style="text-align: right" >职务:</Col>
      <Col span="17" offset="1" >
        <Input v-model="addData.BL_POSI_NAME" />
      </Col>
    </Row>
    <Row v-if="addData.SC_EMPL_TYPE === 5" class="item1">
      <Col span="4" style="text-align: right" >是否为流动党员:</Col>
      <Col span="17" offset="1" >
        <Select placeholder="是否为流动党员" v-model="addData.IS_FLOW_PART">
          <Option v-for="(item,index) in IS_FLOW_PARTList" :key="index" :value="item.value">{{item.label}}</Option>
        </Select>
      </Col>
    </Row>
    <Row v-if="addData.SC_EMPL_TYPE === 7 || addData.SC_EMPL_TYPE === 5" class="item1">
      <Col span="4" style="text-align: right" >所属党组织:</Col>
      <Col span="17" offset="1" >
        <Select placeholder="所属党组织" v-model="addData.PART_ORG_ID">
          <Option v-for="(item,index) in DZZList" :key="index" :value="item.ID">{{item.PART_ORG_NAME}}</Option>
        </Select>
      </Col>
    </Row>
    <div slot="footer">
      <Button type="success" @click="addInfo">保存</Button>
      <Button type="error" @click="modal=false">关闭</Button>
    </div>
  </Modal>
  <div v-if="drModal">
    <Modal
        v-model="drModal"
        width="700"
        title="导入经费发放数据">
      <dq-excel :url="url"></dq-excel>
      <div slot="footer">
        <Button type="default" size="small" style="margin-top: 5px;margin-right:5px" @click="modal=false">取消</Button>
        <Button type="primary" size="small" style="margin-top: 5px;margin-right:5px" @click="closeImEx()">确定</Button>
      </div>
    </Modal>
  </div>
</div>
</template>
<script>
import {
  deleteWorkForce,
  findMZCodeList,
  findWorkForceList,
  insertWorkForce,
  updateWorkForce,
  date2str, findDZZList
} from '../../../api/eventlist'
import { newFindGardenByMapList } from '../../../api/z-new-grid'
import DqExcel from '../components/dq-excel.vue'

export default {
  components: { DqExcel },
  data () {
    return {
      drModal: false,
      IS_FLOW_PARTList: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      folkList: [],
      SC_EMPL_TYPEList: [
        {
          label: '街道工作者',
          value: 1
        },
        {
          label: '社区工作者',
          value: 2
        },
        {
          label: '包联领导干部',
          value: 3
        },
        {
          label: '下沉党员干部',
          value: 4
        },
        {
          label: '在职党员进社区',
          value: 5
        },
        {
          label: '志愿者',
          value: 6
        },
        {
          label: '社区党员',
          value: 7
        }
      ],
      SELECT_SC_EMPL_TYPEList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '街道工作者',
          value: 1
        },
        {
          label: '社区工作者',
          value: 2
        },
        {
          label: '包联领导干部',
          value: 3
        },
        {
          label: '下沉党员干部',
          value: 4
        },
        {
          label: '在职党员进社区',
          value: 5
        },
        {
          label: '志愿者',
          value: 6
        },
        {
          label: '社区党员',
          value: 7
        }
      ],
      xlList: [
        {
          'dictLabel': '未上过学',
          'dictValue': '08'
        },
        {
          'dictLabel': '小学',
          'dictValue': '07'
        },
        {
          'dictLabel': '初中',
          'dictValue': '06'
        },
        {
          'dictLabel': '高中',
          'dictValue': '04'
        },
        {
          'dictLabel': '大学专科',
          'dictValue': '05'
        },
        {
          'dictLabel': '大学本科',
          'dictValue': '03'
        },
        {
          'dictLabel': '硕士',
          'dictValue': '02'
        },
        {
          'dictLabel': '博士',
          'dictValue': '01'
        }
      ],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        STREET_EMPL_NAME: '',
        PAPER_NO: '',
        PHONE: '',
        SC_EMPL_TYPE: ''
      },
      tableColumns: [
        {
          title: '类型',
          slot: 'SC_EMPL_TYPE',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'STREET_EMPL_NAME',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'PAPER_NO',
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'PHONE',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tableData: [],
      modal: false,
      addData: {},
      severUserInfo: {},
      gardenList: [],
      type: '',
      DZZList: [],
      url: '/api/ac/dq/dqWorkForceService/createWorkForceInfo'
    }
  },
  methods: {
    init () {
      findWorkForceList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    selectList () {
      this.params.pageNo = 1
      this.init()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    deleteRow (e) {
      deleteWorkForce(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '删除失败', desc: ret.data.errmsg })
        }
      })
    },
    clickAdd () {
      this.modal = true
      this.addData = {}
      this.type = 'insert'
    },
    clickUpdate (e) {
      this.modal = true
      this.addData = e
      this.type = 'update'
    },
    addInfo () {
      if (this.addData.IN_PART_TIME) {
        this.addData.IN_PART_TIME = date2str(this.addData.IN_PART_TIME)
      }
      if (this.type === 'insert') {
        insertWorkForce(this.addData).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '保存成功', desc: ret.data.errmsg })
            this.init()
            this.modal = false
          } else {
            this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
          }
        })
      }
      if (this.type === 'update') {
        updateWorkForce(this.addData).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '保存成功', desc: ret.data.errmsg })
            this.init()
            this.modal = false
          } else {
            this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
          }
        })
      }
    },
    findMZCodeList () {
      findMZCodeList().then(ret => {
        if (ret.data.errcode === 0) {
          this.folkList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    newFindGardenByMapList () {
      let data = {
        grade: '5',
        id: this.severUserInfo.company_id
      }
      newFindGardenByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.gardenList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findDZZList () {
      findDZZList().then(ret => {
        if (ret.data.errcode === 0) {
          this.DZZList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    clickDr () {
      this.drModal = true
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.findMZCodeList()
    this.newFindGardenByMapList()
    this.findDZZList()
  }
}
</script>
<style scoped>
.container {
  padding: 12px;
}
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: rgb(128, 128, 128);
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.item1 {
  height: 42px;
  line-height: 40px;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.red-star {
  font-family: SimSun;
  color: #f00;
  margin-right: 4px;
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
</style>
